<script setup>
import {ref} from "vue";
import {getclasses, getusermassage} from "@/api/article";
import useUserInfoStore from "@/sts/userinfo";
import {DocumentAdd} from "@element-plus/icons-vue";
import {AddAttention, GetAttention} from "@/api/attention";
import {ElMessage} from "element-plus";

const userinfo=useUserInfoStore();
//输入框中的资源名称
const resourcesName=ref('');
//用户信息
const user=ref({
  id:0,
  name:'',
  username:'',
  introduce:'',
  occupationId:'',
  jurisdiction:'',
  occName:''
})
//关注列表信息
const attention=ref([{
  userId:'',
  username:'',
  resourcesName:'',
  resourcesId:'',
  classesId:'',
  classesName:'',
  introduce:'',
  address:'',
  updateTime:'',
}])
//选择框多选
const options = ref([{
  classesName:'',
  id:''
}])
//选择框对象
const classes_s=ref({
  classesName:'',
  id:0
})
//获取用户信息
const usermassage=async ()=>{
  let result=await getusermassage(userinfo.info);
  user.value=result.data;
  await getclassesService();
}
//获取资源种类列表
const getclassesService=async ()=>{
  let result=await getclasses(user.value.occupationId);
  options.value=result.data;
  await GetAttentionService();
}
usermassage();
//清空选择框和输入框
const RemoveResourcesNameAndClasses=async ()=>{
  classes_s.value.classesName='';
  classes_s.value.id=0;
  resourcesName.value='';
  await GetAttentionService();
}
//对所有数据进行查询
const GetAttentionService=async ()=>{
  if(classes_s.value.classesName!==''){
    for (const tem of options.value){
      if(classes_s.value.classesName===tem.classesName)
        classes_s.value.id=tem.id;
    }
  }
  let result=await GetAttention(user.value.id,resourcesName.value,classes_s.value.id);
  attention.value=result.data;
}
//对资源进行增加
const AddAttentionService=async (row)=>{
    console.log(row.resourcesId);
    await AddAttention(user.value.id,row.resourcesId);
    ElMessage.success("添加成功");
}
</script>

<template>
  <el-card class="box-card">
    <span>
    <el-input v-model="resourcesName" placeholder="输入资源名称" size="large" class="input"/>
    <el-select v-model="classes_s.classesName"  placeholder="请选择资源类型" size="large" class="flex-form">
      <el-option
          v-for="item in options"
          :key="item.classesName"
          :label="item.classesName"
          :value="item.classesName"
      />
    </el-select>
      <el-button type="primary" class="hear-button" @click="GetAttentionService">查询</el-button>
      <el-button class="hear-button" @click="RemoveResourcesNameAndClasses">清空</el-button>
    </span>
    <el-table :data="attention" border style="width: 100%">
      <el-table-column prop="username" label="关注用户"/>
      <el-table-column prop="resourcesName" label="资源名称"/>
      <el-table-column prop="classesName" label="资源类型"/>
      <el-table-column prop="introduce" label="资源介绍"/>
      <el-table-column prop="address" label="资源地址">
        <template #default="{ row }">
          <el-link type="primary" :href="row.address" target="_blank">资源地址</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="上传时间"/>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" :icon="DocumentAdd" circle @click="AddAttentionService(row)"/>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>
.box-card {
  transform: translateY(60px);
  margin-right: 100px;
  height: 600px;
}
.input{
  width: 240px;
  margin-right: 10px;
}
.hear-button{
  margin-left: 10px;
}
</style>